<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt pt10">

            <template>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                    <FormItem label="当月回款:">
                      <CountUp :end="0" :duration="3" :decimals="2" ref="count" v-font="20" />
                    </FormItem>
                    <FormItem label="总回款:">
                      <CountUp :end="0" :duration="3" :decimals="2" ref="count" v-font="20" />
                    </FormItem>
                    <FormItem label="总押金:">
                      <CountUp :end="formValidate.deposit" :duration="3" :decimals="2" ref="count" v-font="20" />
                      (大写:{{ currencyCN(formValidate.deposit) }})
                    </FormItem>
                </Form>
            </template>
        </Card>
    </div>
</template>

<script>
    import { supplier, putSupplier, cityApi } from "@/api/setting";
    import { mapMutations } from "vuex";
    export default {
        name: 'index',
        components: {},
        data() {
            return {
                formValidate: {
                    supplier_name: '',
                    name: '',
                    email: '',
                    phone: '',
                    detailed_address: '',
                    province:0,
                    city:0,
                    area:0,
                    street:0,
                    addressSelect:[],
                    address:'',
                    deposit:0
                },
                urlList: [
                  'https://file.iviewui.com/images/image-demo-1.jpg',
                  'https://file.iviewui.com/images/image-demo-2.jpg',
                  'https://file.iviewui.com/images/image-demo-3.jpg',
                  'https://file.iviewui.com/images/image-demo-4.jpg',
                  'https://file.iviewui.com/images/image-demo-5.jpg',
                  'https://file.iviewui.com/images/image-demo-6.jpg'
                ],
                addresData: [],
                ruleValidate: {
                    supplier_name: [
                        { required: true, message: '请输入供应商名称', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' },
                    ]
                }
            }
        },
        created() {
            this.getInfo();
            let data = {pid:0}
            this.cityInfo(data);
        },
        mounted() {
            this.setCopyrightShow({ value: false });
        },
        destroyed () {
            this.setCopyrightShow({ value: true });
        },
        methods: {
            ...mapMutations('store/layout', [
                'setCopyrightShow'
            ]),
            currencyCN(n){
              // n = 20.23
              if (typeof n !== 'number') {
                n = parseFloat(n)
              }
              if (isNaN(n)) return '金额无效'

              const fraction = ['角', '分']
              const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
              const unit = [['元', '万', '亿'], ['', '拾', '佰', '仟']]
              const head = n < 0 ? '负' : ''
              n = Math.abs(n)

              let s = ''

              // 小数部分
              for (let i = 0; i < fraction.length; i++) {
                s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i])
                    .replace(/零./, '')
              }
              s = s || '整'

              // 整数部分
              n = Math.floor(n)
              for (let i = 0; i < unit[0].length && n > 0; i++) {
                let p = ''
                for (let j = 0; j < unit[1].length && n > 0; j++) {
                  p = digit[n % 10] + unit[1][j] + p
                  n = Math.floor(n / 10)
                }
                s = p.replace(/(零.)*零$/, '')
                    .replace(/^$/, '零') + unit[0][i] + s
              }

              return head + s
                  .replace(/(零.)*零元/, '元')
                  .replace(/(零.)+/g, '零')
                  .replace(/^整$/, '零元整')
            },
            cityInfo(data){
                cityApi(data).then(res=>{
                    this.addresData = res.data
                })
            },
            getInfo(){
                supplier().then(res=>{
                    this.formValidate = res.data.info;
                    let addressSelect = [];
                    if(res.data.province){
                        addressSelect.push(res.data.province)
                    }
                    if(res.data.city){
                        addressSelect.push(res.data.city)
                    }
                    if(res.data.area){
                        addressSelect.push(res.data.area)
                    }
                    if(res.data.street){
                        addressSelect.push(res.data.street)
                    }
                    this.formValidate.addressSelect = addressSelect;
                }).catch(err=>{
                    this.$Message.error(err.msg);
                })
            },
            handleSubmit (name) {
                if(this.formValidate.email !== ''){
                    if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/i.test(this.formValidate.email)){
                        return this.$Message.error('请输入正确的供应商邮箱')
                    }
                }
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        putSupplier(this.formValidate).then(res=>{
                            this.$Message.success(res.msg)
                        }).catch(err=>{
                            this.$Message.error(err.msg)
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .input{
        max-width: 460px;
    }
    .fixed-card {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 200px;
        z-index: 10;
        box-shadow: 0 -1px 2px rgb(240, 240, 240);

        /deep/ .ivu-card-body {
            padding: 15px 16px 14px;
        }

        .ivu-form-item {
            margin-bottom: 0;
        }

        /deep/ .ivu-form-item-content {
            margin-right: 124px;
            text-align: center;
        }

        .ivu-btn {
            height: 36px;
            padding: 0 20px;
        }
    }
</style>
